<template>
  <div class="page-header">
    <div class="page-header-content">
      <!-- 左侧内容 -->
      <div class="page-header-left">
        <!-- 返回按钮 -->
        <el-button
          v-if="showBack"
          text
          :icon="ArrowLeft"
          @click="handleBack"
          class="back-button"
        >
          返回
        </el-button>

        <!-- 面包屑 -->
        <el-breadcrumb v-if="breadcrumbs.length > 0" class="breadcrumb">
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbs"
            :key="index"
            :to="item.to"
          >
            <el-icon v-if="item.icon">
              <component :is="item.icon" />
            </el-icon>
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 标题区域 -->
        <div class="title-area">
          <div class="title-content">
            <!-- 图标 -->
            <el-icon v-if="icon" class="title-icon">
              <component :is="icon" />
            </el-icon>
            
            <!-- 主标题 -->
            <h1 class="title">{{ title }}</h1>
            
            <!-- 副标题 -->
            <span v-if="subtitle" class="subtitle">{{ subtitle }}</span>
            
            <!-- 标签 -->
            <el-tag
              v-if="tag"
              :type="tagType"
              :effect="tagEffect"
              size="small"
              class="title-tag"
            >
              {{ tag }}
            </el-tag>
          </div>
          
          <!-- 描述 -->
          <p v-if="description" class="description">
            {{ description }}
          </p>
        </div>
      </div>

      <!-- 右侧操作区域 -->
      <div class="page-header-right" v-if="$slots.extra || showExtra">
        <slot name="extra">
          <!-- 默认操作按钮 -->
          <div class="default-actions" v-if="showExtra">
            <el-button
              v-if="showRefresh"
              :icon="Refresh"
              @click="handleRefresh"
              title="刷新"
              circle
            />
            <el-button
              v-if="showSettings"
              :icon="Setting"
              @click="handleSettings"
              title="设置"
              circle
            />
            <el-button
              v-if="showHelp"
              :icon="QuestionFilled"
              @click="handleHelp"
              title="帮助"
              circle
            />
          </div>
        </slot>
      </div>
    </div>

    <!-- 统计信息 -->
    <div v-if="stats && stats.length > 0" class="page-stats">
      <div class="stats-grid">
        <div
          v-for="(stat, index) in stats"
          :key="index"
          class="stat-item"
          :class="{ 'clickable': stat.clickable }"
          @click="stat.clickable && handleStatClick(stat)"
        >
          <div class="stat-icon" v-if="stat.icon">
            <el-icon :style="{ color: stat.color }">
              <component :is="stat.icon" />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value" :style="{ color: stat.color }">
              {{ stat.value }}
            </div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 标签页 -->
    <div v-if="tabs && tabs.length > 0" class="page-tabs">
      <el-tabs
        v-model="activeTab"
        type="card"
        @tab-change="handleTabChange"
        class="header-tabs"
      >
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
          :disabled="tab.disabled"
        >
          <template #label>
            <span class="tab-label">
              <el-icon v-if="tab.icon">
                <component :is="tab.icon" />
              </el-icon>
              {{ tab.label }}
              <el-badge
                v-if="tab.badge"
                :value="tab.badge"
                :type="tab.badgeType || 'primary'"
                class="tab-badge"
              />
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  ArrowLeft,
  Refresh,
  Setting,
  QuestionFilled,
  House
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  // 标题
  title: {
    type: String,
    required: true
  },
  // 副标题
  subtitle: {
    type: String,
    default: ''
  },
  // 描述
  description: {
    type: String,
    default: ''
  },
  // 图标
  icon: {
    type: [String, Object],
    default: null
  },
  // 标签
  tag: {
    type: String,
    default: ''
  },
  // 标签类型
  tagType: {
    type: String,
    default: 'primary',
    validator: (value) => ['success', 'info', 'warning', 'danger', 'primary'].includes(value)
  },
  // 标签效果
  tagEffect: {
    type: String,
    default: 'light',
    validator: (value) => ['dark', 'light', 'plain'].includes(value)
  },
  // 面包屑
  breadcrumbs: {
    type: Array,
    default: () => []
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: false
  },
  // 返回路径
  backTo: {
    type: String,
    default: ''
  },
  // 是否显示默认操作按钮
  showExtra: {
    type: Boolean,
    default: false
  },
  // 是否显示刷新按钮
  showRefresh: {
    type: Boolean,
    default: true
  },
  // 是否显示设置按钮
  showSettings: {
    type: Boolean,
    default: false
  },
  // 是否显示帮助按钮
  showHelp: {
    type: Boolean,
    default: false
  },
  // 统计数据
  stats: {
    type: Array,
    default: () => []
  },
  // 标签页
  tabs: {
    type: Array,
    default: () => []
  },
  // 当前激活的标签页
  currentTab: {
    type: String,
    default: ''
  },
  // 是否自动生成面包屑
  autoBreadcrumb: {
    type: Boolean,
    default: true
  }
})

// Emits
const emit = defineEmits([
  'back',
  'refresh',
  'settings',
  'help',
  'stat-click',
  'tab-change'
])

// 响应式数据
const router = useRouter()
const route = useRoute()
const activeTab = ref(props.currentTab)

// 计算属性
const computedBreadcrumbs = computed(() => {
  if (props.breadcrumbs.length > 0) {
    return props.breadcrumbs
  }
  
  if (props.autoBreadcrumb) {
    return generateBreadcrumbs()
  }
  
  return []
})

// 生成面包屑
const generateBreadcrumbs = () => {
  const breadcrumbs = [
    { title: '首页', to: '/', icon: House }
  ]
  
  const pathArray = route.path.split('/').filter(path => path)
  let currentPath = ''
  
  pathArray.forEach((path, index) => {
    currentPath += `/${path}`
    
    // 这里可以根据路由配置来获取更友好的标题
    const routeRecord = router.getRoutes().find(r => r.path === currentPath)
    const title = routeRecord?.meta?.title || path
    
    // 最后一项不需要链接
    const to = index === pathArray.length - 1 ? undefined : currentPath
    
    breadcrumbs.push({
      title,
      to
    })
  })
  
  return breadcrumbs
}

// 事件处理
const handleBack = () => {
  if (props.backTo) {
    router.push(props.backTo)
  } else {
    router.back()
  }
  emit('back')
}

const handleRefresh = () => {
  emit('refresh')
}

const handleSettings = () => {
  emit('settings')
}

const handleHelp = () => {
  emit('help')
}

const handleStatClick = (stat) => {
  emit('stat-click', stat)
}

const handleTabChange = (tabName) => {
  emit('tab-change', tabName)
}

// 生命周期
onMounted(() => {
  if (props.currentTab) {
    activeTab.value = props.currentTab
  }
})
</script>

<style scoped>
.page-header {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.page-header-content {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.page-header-left {
  flex: 1;
}

.back-button {
  margin-bottom: 12px;
  padding: 4px 8px;
  font-size: 14px;
  color: #666;
  transition: color 0.3s;
}

.back-button:hover {
  color: #409eff;
}

.breadcrumb {
  margin-bottom: 16px;
}

.breadcrumb :deep(.el-breadcrumb__item) {
  font-size: 14px;
}

.breadcrumb :deep(.el-breadcrumb__inner) {
  color: #666;
  font-weight: normal;
}

.breadcrumb :deep(.el-breadcrumb__inner:hover) {
  color: #409eff;
}

.title-area {
  margin-bottom: 0;
}

.title-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.title-icon {
  font-size: 28px;
  color: #409eff;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

.subtitle {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}

.title-tag {
  margin-left: 8px;
}

.description {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.page-header-right {
  flex-shrink: 0;
  margin-left: 24px;
}

.default-actions {
  display: flex;
  gap: 8px;
}

/* 统计信息 */
.page-stats {
  border-top: 1px solid #f0f0f0;
  padding: 20px 24px;
  background: #fafafa;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.stat-item.clickable {
  cursor: pointer;
}

.stat-item.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.1);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 标签页 */
.page-tabs {
  border-top: 1px solid #f0f0f0;
}

.header-tabs {
  margin: 0;
}

.header-tabs :deep(.el-tabs__header) {
  margin: 0;
  background: #fafafa;
}

.header-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0 24px;
}

.header-tabs :deep(.el-tabs__item) {
  border: none;
  border-radius: 0;
  background: transparent;
  margin-right: 2px;
}

.header-tabs :deep(.el-tabs__item.is-active) {
  background: white;
  color: #409eff;
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-badge {
  margin-left: 6px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header-content {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .page-header-right {
    margin-left: 0;
    align-self: flex-end;
  }

  .title {
    font-size: 24px;
  }

  .title-content {
    flex-wrap: wrap;
    gap: 8px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-item {
    padding: 12px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .stat-value {
    font-size: 20px;
  }

  .header-tabs :deep(.el-tabs__nav-wrap) {
    padding: 0 16px;
  }
}
</style>